<template>
    <el-card class="box-card">
        <div class="text item">
            <div class="select_one">
                <table style="float: left; margin-right: 50px">
                    <tr>
                        <td>订单号</td>
                        <td><el-input v-model="condition.id" placeholder="请输入内容"></el-input></td>
                    </tr>
                    <tr>
                        <td>菜品名称</td>
                        <td><el-input v-model="condition.foot" placeholder="请输入内容"></el-input></td>
                    </tr>
                    <tr>
                        <td>订单类型</td>
                        <td><el-select v-model="condition.orderType" placeholder="请选择">
                            <el-option
                                    v-for="item in options_two"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select></td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <td>下单时间</td>
                        <td> <el-date-picker
                                v-model="value2"
                                type="datetimerange"
                                :picker-options="pickerOptions"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                align="right">
                        </el-date-picker></td>
                    </tr>
                    <tr>
                        <td>订单状态</td>
                        <td><el-select v-model="condition.state" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select></td>
                    </tr>
                    <tr>
                        <td>  <el-button type="primary" @click="selectByCondition()">筛选</el-button></td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div>
                <el-tabs type="border-card"  v-model="condition.state" @tab-click="handleClick">
                    <el-tab-pane v-for="item in options" :name="item.value" :label="item.label">
                        <el-table
                                :data="datas"
                                style="width: 100%">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-table
                                            :data="props.row.orderFoods"
                                            stripe
                                            style="width: 100%">
                                        <el-table-column
                                                prop="foods.name"
                                                label="菜品"
                                                width="180">
                                        </el-table-column>
                                        <el-table-column
                                                prop="foods.price"
                                                label="单价"
                                                width="180">
                                        </el-table-column>
                                        <el-table-column
                                                prop="count"
                                                label="数量">
                                        </el-table-column>
                                    </el-table>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="订单ID"
                                    prop="id">
                            </el-table-column>
                            <el-table-column
                                    label="餐台号"
                                    prop="tablesId">
                            </el-table-column>
                            <el-table-column
                                    label="就餐人数"
                                    prop="humanCount">
                            </el-table-column>
                            <el-table-column
                                    label="消费类型"
                                    prop="orderType">
                            </el-table-column>
                            <el-table-column
                                    label="消费时间"
                                    prop="orderTime">
                            </el-table-column>
                            <el-table-column
                                    label="订单状态"
                                    prop="state">
                            </el-table-column>
                            <el-table-column
                                    label="实付金额"
                                    prop="actualPrice">
                            </el-table-column>
                        </el-table>


                    </el-tab-pane>
                    <el-pagination
                            @size-change="pagesize_s"
                            @current-change="page"
                            background
                            :current-page="condition.currPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="20"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="count"
                    >
                    </el-pagination>
                </el-tabs>

            </div>
        </div>
    </el-card>
</template>

<script>
    import axios_vue from 'axios'
    //axios_vue.defaults.headers.post['Content-type']='application/json;charset=UTF-8';
    Date.prototype.format=function(fmt){
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "H+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }
    export default {
        name: "Consumption",
        data(){
            return{
                /*查询条件*/
                condition:{
                    currPage: 1,
                    pageSize: 20,
                    id:'',
                    orderTime:'',
                    orderType:'',
                    state:'全部',
                    foot:'',
                    orderTimebegin:'',
                    orderTimeend:'',
                },
                datas:[],
                /*总条数*/
                count: 1,
                options: [{
                    value: '全部',
                    label: '全部'
                }, {
                    value: '待结账',
                    label: '待结账'
                }, {
                    value: '待消费',
                    label: '待消费'
                }, {
                    value: '待付款',
                    label: '待付款'
                }, {
                    value: '已结账',
                    label: '已结账'
                },{
                    value: '免单',
                    label: '免单'
                }],
                options_two: [
                    {
                        value: '全部',
                        label: '全部'
                    }, {
                    value: '店吃',
                    label: '店吃'
                }, {
                    value: '客房',
                    label: '客房'
                }, {
                    value: '外带',
                    label: '外带'
                }],
                value: '',

                value2: '',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }
        },
        methods:{
            selectByCondition(){
                console.log(this.value2)
                if (this.value2 != ""){
                    let text = this.value2.toString();
                    this.condition.orderTimebegin = new Date(text.split(",")[0]).format("yyyy/MM/dd HH:mm:ss");
                    this.condition.orderTimeend = new Date(text.split(",")[1]).format("yyyy/MM/dd HH:mm:ss");
                }

                this.response();
            },
            handleClick(tab, event) {
                this.response();
            },
            page(curr){
                this.condition.currPage =curr;
                this.response();
            },
            pagesize_s(size){
                this.condition.pageSize = size;
                this.response();
            },
            response(){
                let _this = this;
                axios_vue.post('/ec/show',this.condition)
                    .then(function (response) {
                        _this.datas = response.data.data;
                        _this.count = response.data.count;
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        created() {
            this.response();
        }
    }
</script>

<style scoped>
    @import "../../css/Consumption.css";

</style>
